<template>
  <cu-layout title="我的地址">
    <view class="p-10">
      <!-- <view v-if="state.isSelect" class="cu-card">
        <view class="flex-a h-30" @click="save(0)">
          <text
            class="iconfont"
            :class="state.current === 0 ? 'icon-yuanxingxuanzhongfill text-primary' : 'icon-yuanxingweixuanzhong text-tips'"
          />
          <view class="flex-1 px-10 text-16 text-content">不选择收货地址</view>
        </view>
      </view> -->
      <view v-show="!state.list.length" class="cu-card">
        <view class="py-40">
          <uv-empty mode="address" />
        </view>
      </view>

      <view
        v-for="item in state.list"
        :key="item.id"
        class="cu-card"
      >
        <view class="flex pt-2" @click="save(item.id)">
          <view v-if="state.isSelect" v-show="!state.isEdit" class="pt-5 mr-10">
            <text
              class="iconfont"
              :class="state.current === item.id ? 'icon-yuanxingxuanzhongfill text-primary' : 'icon-yuanxingweixuanzhong text-tips'"
            />
          </view>
          <view class="flex-1">
            <view class="flex">
              <view class="flex-1">
                <view class="flex-a">
                  <view v-if="item.is_def" class="tag">
                    默认
                  </view>
                  <view class="text-15">
                    {{ item.name }} {{ item.phone }}
                  </view>
                </view>
                <view class="text-13 text-content mt-4">
                  {{ `${item.province_name} ${item.city_name} ${item.district_name}` }}
                </view>
              </view>
              <view class="flex-shrink pt-5">
                <text class="iconfont icon-xiugai" @click.stop="edit(item)" />
              </view>
            </view>
            <view v-show="state.isEdit" class="flex-ba mt-9 pt-9 hair-t">
              <view class="flex-a">
                <text
                  class="iconfont"
                  style="font-size: 32rpx;"
                  :class="item.is_def ? 'icon-yuanxingxuanzhongfill text-primary' : 'icon-yuanxingweixuanzhong text-tips'"
                  @click.stop="updateDef(item.id)"
                />
                <view class="ml-5">默认地址</view>
              </view>
              <view class="text-error" @click.stop="remove(item.id)">删除</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="cu-footer cu-footer-large">
      <view class="cu-footer-fixed px-15 flex-a shadow-t">
        <view class="flex-1 mr-10">
          <uv-button type="primary" plain size="large" shape="circle" @click="state.isEdit = !state.isEdit">{{ state.isEdit ? '完成' : '管理' }}</uv-button>
        </view>
        <view class="flex-2">
          <uv-button type="primary" size="large" shape="circle" @click="edit()">新增收货信息</uv-button>
        </view>
      </view>
    </view>

    <cu-popup-address v-model:show="state.show" :data="state.form" @done="reload" />
  </cu-layout>
</template>

<script setup>
import {
  reactive
} from 'vue'
import {
  onLoad
} from '@dcloudio/uni-app'
import $ from '@/sheep'
const state = reactive({
  isEdit: false,
  isSelect: false,
  list: [],
  current: 0,
  show: false,
  form: {}
})
onLoad(async(options = {}) => {
  if (options.current) {
    state.current = Number(options.current)
  }
  if (options.isSelect) {
	  state.isSelect = true
  }
  reload()
})

function reload() {
  $.get('/user/addressList', {}).then(res => {
    state.list = res.data.map(v => {
      v.id = Number(v.id)
      return v
    })
    if (state.current && !res.data.some(v => v.id === state.current)) {
      state.current = 0
    }
  })
}

function edit(data) {
  if (!data) {
    data = {
      is_def: state.list.some(v => v.is_def) ? 0 : 1
    }
  }
  state.form = data
  state.show = true
}

function remove(id) {
  $.post('/user/addressDel', { id }).then(res => {
    $.utils.toast(res.msg)
    if (res.success) {
      reload()
    }
  })
}

function updateDef(id) {
  $.post('/user/addressDef', { id }).then(res => {
    $.utils.toast(res.msg)
    if (res.success) {
      state.list.map(v => v.is_def = v.id === id ? 1 : 0)
    }
  })
}

function save(id) {
  state.current = id
  uni.$emit('selectAddress', { id })
  $.router.back()
}
</script>

<style lang="scss">
	.item {
		// position: relative;
		// &:not(:last-child)::after {
		// 	content: '';
		// 	position: absolute;
		// 	left: -28rpx;
		// 	bottom: 0;
		// 	width: calc(100% + 56rpx);
		// 	height: 16rpx;
		// 	background-color: #f2f2f2;
		// }
	}
	.cu-card {
		.iconfont {
			font-size: 48rpx;
		}
	}

	.tag {
		background-color: $uv-primary;
		height: 36rpx;
		line-height: 36rpx;
		color: #fff;
		border-radius: 8rpx;
		font-size: 20rpx;
		padding: 0 10rpx;
		margin-right: 6rpx;
		text-align: center;
	}
</style>
